<script setup>
import {ref, onMounted} from 'vue'
import { useRouter } from 'vue-router';
import axios from 'axios'
const router = useRouter();
const recommend = ref ([])
const token = localStorage.getItem('token')
const fetchData = async () => {
  try {
    const response = await axios.post('http://127.0.0.1:8000/user/api/concern/', {
        token: token
    }, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    recommend.value = response.data.concern;
    console.log(response)
  } catch (error) {
    console.error('Error fetching data', error);
  }
};

onMounted(async () => {
  await fetchData();  // 页面加载时立即获取第一页的数据
});


function likeuser(id) {
    // 使用axios或其他方式将数据发送到后端
  axios.post('http://127.0.0.1:8000/car/api/likeuser/', 
        {
          likeuser_id:id,
          token:token
        }
    )
        .then(response => {
            // 处理后端返回的数据
         alert(response.data.message)
        })
        .catch(error => {
            // 处理错误
            console.error('发送数据到后端失败', error);
        });
}

function gousermsg(id) {
    router.push({ 
    name: 'usermsg',
    params: { 
      id: id
    } 
  });
}

</script>

<template>
<div class="content-right">
    <!-- 第二个 推荐关注 -->
    <div class="sidebar-recommend card">
        <div class="recommend-hd">
            <i class="iconfont icon-jurassic_edit-user"></i>
            <span class="creator-hd-title">推荐关注</span>
        </div>
        <div class="recommend-bd">
            <ul>
                <li v-for="v in recommend" :key="v.id">
                    <img src="@/assets/image/login_bak.jpg" alt="" @click="gousermsg(v.id)">
                    <div class="recommend-content">
                        <div class="recommend-head" @click="gousermsg(v.id)">{{ v.webname }}</div>
                        <!-- <div class="recommend-detail">关注人数：{{ v.likes }}</div> -->
                    </div>
                    <div class="recommend-button">
                        <el-button type="primary" plain  @click="likeuser(v.id)" >关注</el-button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
</template>

<style scoped>

</style>
